<template>
    <Header></Header>
    <br/>
    <!-- 公告栏 -->
    <AnnouncementBar></AnnouncementBar>
    <br/>
    <!-- 置顶区域 -->
    <div class="container mx-auto max-w-screen-xl">
      <div v-if="topArticles && topArticles.length > 0" class="relative w-full h-[500px] rounded-xl overflow-hidden mb-10">
      <!-- 置顶文章轮播 -->
      <div class="absolute inset-0">
        <div v-for="(article, index) in topArticles.slice(0, 3)" :key="article.id"
             class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
             :class="{ 'opacity-100 z-10': index === activeTopArticleIndex, 'opacity-0': index !== activeTopArticleIndex }">
          <!-- 全屏背景图片 -->
          <div class="absolute inset-0 rounded-xl overflow-hidden">
            <img :src="article.titleImage" :alt="article.title"
                 class="w-full h-full object-cover rounded-xl z-0" />
          </div>
          <!-- 内容区域 -->
          <div class="absolute inset-0 flex flex-col justify-end p-10">
    
            <!-- 文章标题 -->
<div class="absolute bottom-4 left-4 text-left w-full max-w-2xl px-4 h-33">
  <div class="text-1xl md:text-3xl font-bold text-black mb-6 
              drop-shadow-[0_4px_12px_rgba(0,0,0,0.8)] 
              rounded-xl backdrop-blur-sm">
            
    {{ article.title }}
  </div>
</div>  
            <!-- 立即围观按钮 -->
            <button @click="goArticleDetail(article.id)"
                    class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors duration-300 w-fit relative z-10">
              立即围观
              <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 轮播指示器 -->
      <div class="absolute bottom-5 left-1/2 transform -translate-x-1/2 flex space-x-2 z-30">
        <button v-for="(article, index) in topArticles.slice(0, 3)" :key="article.id"
                @click="switchTopArticle(index)"
                class="w-3 h-3 rounded-full transition-all duration-300"
                :class="{ 'bg-white w-8': index === activeTopArticleIndex, 'bg-white/60': index !== activeTopArticleIndex }">
        </button>
      </div>
    </div>
    </div>

    <!-- 文章列表区域 -->
    <div class="container mx-auto max-w-screen-xl mt-8 mb-10">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 主内容区域 -->
            <div class="col-span-1 md:col-span-3 px-3 order-1 md:order-1">
                <!-- 文章列表 -->
                <div v-if="articles && articles.length > 0" class="space-y-6">
                    <article v-for="(article, index) in articles" :key="article.id"
                        class="group border border-gray-200 rounded-xl shadow-md hover:shadow-xl dark:border-gray-700 overflow-hidden transition-all duration-300 relative article-card-stable">
                      
                        <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-gradient-to-br from-gray-900/40 to-blue-900/40"></div>
                     
                        <div v-if="article.titleImage" class="absolute inset-0 z-0 blur-bg" 
                             :style="{ 
                                 backgroundImage: 'url(' + article.titleImage + ')',
                             }"
                        ></div>
                        <!-- 偶数索引文章：图片在左 -->
                        <div v-if="index % 2 === 0" class="flex flex-col md:flex-row h-auto md:h-64 relative z-10">
                            <!-- 左侧文章大图 - 显示在毛玻璃效果之上 -->
                            <div class="md:w-1/2 relative">
                                <a @click="goArticleDetail(article.id)" class="cursor-pointer block h-full">
                                    <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" 
                                         :src="article.titleImage" 
                                         :alt="article.title" 
                                         style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);"/>
                                    <div class="absolute inset-0 bg-gradient-to-r from-transparent to-black/60 opacity-100 transition-opacity duration-300"></div>
                                </a>
                            </div>
                            
                            <!-- 右侧内容区域 -->
                            <div class="md:w-1/2 p-6 flex flex-col justify-between relative h-full">
                                <!-- 优化的渐变遮罩层，提高文字可读性 -->
                                <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/65 to-black/55 z-10"></div>
                                
                                <!-- 内容区域，设置z-index确保在最上层 -->
                                <div class="z-20">
                                    <!-- 上部：文章标题 -->
                                    <div class="pl-8">
                                        <a  @click="goArticleDetail(article.id)" class="cursor-pointer">
                                            <!-- 置顶标签 -->
                                            <div v-if="article.isTop" class="inline-block mb-2 px-2 py-1 text-xs font-bold text-white bg-red-500 rounded">
                                                置顶
                                            </div>
                                            <h1  class=" text-3xl font-bold text-white mb-4 leading-tight line-clamp-2 group-hover:text-blue-300 transition-colors duration-300">
                                                {{ article.title }}
                                            </h1>
                                        </a>
                                        
                                        <!-- 中部：文章内容摘要 -->
                                        <p class="text-gray-200 text-xl leading-relaxed line-clamp-4 mb-4 mt-6 pl-8">
                                            {{ article.description || '暂无摘要...' }}
                                        </p>
                                    </div>
                                    
                                    <!-- 下部：元信息 -->
                                        <div class="flex flex-wrap items-center gap-4 text-sm text-gray-300 mt-6 pl-12 mt-auto">
                                        <!-- 发布时间 -->
                                        <span class="flex items-center text-black">
                                            <svg class="w-4 h-4 mr-1.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {{ article.createTime || article.updateTime }}
                                        </span>
                                        
                                        <!-- 文章标签 -->
                                        <div v-if="article.tags && article.tags.length > 0" class="flex flex-wrap gap-1">
                                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags" :key="index"
                                                class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-xs font-medium hover:bg-blue-200 hover:text-blue-900 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 dark:hover:text-blue-200 transition-colors duration-200 cursor-pointer">
                                                <svg class="w-3 h-3 mr-0.5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                                                </svg>
                                                {{ item.name }}
                                            </div>
                                        </div>
                                        
                                        <!-- 所属分类 -->
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-1.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                            </svg>
                                            <a @click="goCatagoryArticleListPage(article.category?.id || article.categoryId, article.category?.name || '')" 
                                               class="hover:text-green-300 hover:underline cursor-pointer transition-colors duration-200">
                                                {{ article.category?.name || '' }}
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 奇数索引文章：图片在右 -->
                        <div v-else class="flex flex-col md:flex-row-reverse h-auto md:h-64 relative z-10">
                            <!-- 右侧文章大图 - 显示在毛玻璃效果之上 -->
                            <div class="md:w-1/2 relative">
                                <a @click="goArticleDetail(article.id)" class="cursor-pointer block h-full">
                                    <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" 
                                         :src="article.titleImage" 
                                         :alt="article.title" 
                                         style="clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);"/>
                                    <div class="absolute inset-0 bg-gradient-to-r from-transparent to-black/60 opacity-100 transition-opacity duration-300"></div>
                                </a>
                            </div>
                            
                            <!-- 右侧内容区域 -->
                            <div class="md:w-1/2 p-6 flex flex-col justify-between relative h-full">
                                <!-- 优化的渐变遮罩层，提高文字可读性 -->
                                <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/65 to-black/55 z-10"></div>
                                
                                <!-- 内容区域，设置z-index确保在最上层 -->
                                <div class="z-20">
                                    <!-- 上部：文章标题 -->
                                    <div class="pl-8">
                                        <a  @click="goArticleDetail(article.id)" class="cursor-pointer">
                                            <!-- 置顶标签 -->
                                            <div v-if="article.isTop" class="inline-block mb-2 px-2 py-1 text-xs font-bold text-white bg-red-500 rounded">
                                                置顶
                                            </div>
                                            <h1  class=" text-3xl font-bold text-white mb-4 leading-tight line-clamp-2 group-hover:text-blue-300 transition-colors duration-300">
                                                {{ article.title }}
                                            </h1>
                                        </a>
                                        
                                        <!-- 中部：文章内容摘要 -->
                                        <p class="text-gray-200 text-xl leading-relaxed line-clamp-4 mb-4 mt-6 pl-8">
                                            {{ article.description || '暂无摘要...' }}
                                        </p>
                                    </div>
                                    
                                    <!-- 下部：元信息 -->
                                        <div class="flex flex-wrap items-center gap-4 text-sm text-gray-300 mt-6 pl-12 mt-auto">
                                        <!-- 发布时间 -->
                                        <span class="flex items-center text-black">
                                            <svg class="w-4 h-4 mr-1.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                            {{ article.createTime || article.updateTime }}
                                        </span>
                                        
                                        <!-- 文章标签 -->
                                        <div v-if="article.tags && article.tags.length > 0" class="flex flex-wrap gap-1">
                                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags" :key="index"
                                                class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-xs font-medium hover:bg-blue-200 hover:text-blue-900 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800 dark:hover:text-blue-200 transition-colors duration-200 cursor-pointer">
                                                <svg class="w-3 h-3 mr-0.5" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                                                </svg>
                                                {{ item.name }}
                                            </div>
                                        </div>
                                        
                                        <!-- 所属分类 -->
                                        <span class="flex items-center">
                                            <svg class="w-4 h-4 mr-1.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                            </svg>
                                            <a @click="goCatagoryArticleListPage(article.category?.id || article.categoryId, article.category?.name || '')" 
                                               class="hover:text-green-300 hover:underline cursor-pointer transition-colors duration-200">
                                                {{ article.category?.name || '' }}
                                            </a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <div v-else>
                    <div class="flex flex-col items-center mb-5">
                        <p class="text-gray-500 mt-5 text-lg font-bold">暂无文章</p>
                    </div>
                </div>

                <!-- 分页 -->
                <nav aria-label="Page navigation example" v-if="total >= 5">
                    <ul class="flex items-center justify-center mt-10 mb-10 -space-x-px h-10 text-base">
                        <li v-for="page in pages" :key="page">
                            <a @click="getArticles(page)"
                                class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[page == current ? 'text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700' : 'text-gray-500  hover:bg-gray-100 hover:text-gray-700']">
                                {{ page }}
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- 右边栏 -->
            <div class="col-span-1 md:col-span-1 px-3 order-2 md:order-2">
                <div class="sticky top-21 w-full">
                    <UserInfoCard></UserInfoCard>
                    <!-- 电子时钟 -->
                        <div class="mb-3 w-[120%] bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 p-5 h-[180px]">
                        <h2 class="mb-4 font-bold text-gray-900 uppercase dark:text-white">今日信息</h2>
                        <div class="flex items-center justify-center h-4/5">
                            <div class="text-center">
                                <div class="text-2xl font-mono font-bold text-black-500 dark:text-black-400" id="current-time">
                                    {{ currentTime }}
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400 mt-3" id="current-date">
                                    {{ currentDate }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 本站运行时间  -->
                        <div class="mb-3 w-[120%] bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 p-5 h-[180px]">
                        <h2 class="mb-4 font-bold text-gray-900 uppercase dark:text-white">本站运行时间</h2>
                        <div class="flex items-center justify-center h-4/5">
                            <div class="text-center">
                                <div class="text-lg font-mono font-bold text-gray-700 dark:text-gray-200">
                                    {{ siteRuntime }}
                                </div>
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-3">
                                    自站点上线以来
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 文章分类 -->
                        <div
                            class="mb-3 w-[120%] font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">分类</h2>
                        <div
                            class="text-sm font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                                :key="index"
                                class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-orange-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-orange dark:focus:ring-gray-500 dark:focus:text-white">
                                 <svg t="1758263244799" class="icon w-4 h-4 mx-4 text-orange-500"
                                  viewBox="0 0 1024 1024" version="1.1"
                                  xmlns="http://www.w3.org/2000/svg" p-id="3244"
                                   width="200" >
                                   <path d="M639.68 194.624c-164.992 0-298.688 133.632-298.688
                                    298.56 0 165.056 133.632 298.88 298.688 298.88 164.8 0 
                                    298.56-133.888 298.56-298.88 0-110.528-60.032-206.912-149.12-258.624C745.216 
                                    209.152 694.08 194.624 639.68 194.624zM639.68
                                     739.648c-136.064 0-246.464-110.272-246.464-246.464
                                      0-136.128 110.336-246.528 246.464-246.528s246.4 
                                      110.336 246.4 246.528C886.208 629.376 775.808 739.648 639.68
                                       739.648z" fill="#333333" p-id="3245">
                                       </path>
                                       <path d="M985.664 768.64c14.208 13.952 14.208 36.544 0 
                                       50.432l0 0c-14.016 13.824-36.48
                                        13.824-50.368 0l-52.48-52.8c-14.08-13.824-14.08-36.352 
                                        0-50.176l0 0c13.888-13.952 36.48-13.952 50.432 0L985.664 768.64z"
                                         fill="#333333" p-id="3246"></path>
                                         <path d="M344.256 286.912 344.256 283.392 27.712 283.392l0 54.4
                                          256.256 0C301.056 316.992 321.344 299.968 344.256 286.912z" fill="#333333" p-id="3247">
                                          </path>
                                          <path d="M257.344 475.328 27.712 475.328l0 54.4 230.016 0C256.64 520.448 254.912 511.552 254.912 501.888 254.784 492.8 256.64 484.16 257.344 475.328z" fill="#333333" p-id="3248"></path>
                                          <path d="M275.84 663.616 27.712 663.616l0 54.464 308.672 0 0-1.216C313.28 703.552 292.928 685.696 275.84 663.616z" fill="#333333" p-id="3249">
                                            </path>
                                            </svg>
                                {{ item.name }}
                            </a>
                        </div>

                    </div>

                    <!-- 文章标签 -->
                        <div
                            class="mb-3 w-[120%] font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">标签</h2>
                        <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                            class="inline-block bg-orange-100 text-green-800 text-xs font-medium mr-2 mb-1 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import AnnouncementBar from '@/components/AnnouncementBar.vue'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { getIndexArticles } from '@/api/frontend/index'
import { getCategories } from '@/api/frontend/category'
import { getTags } from '@/api/frontend/tag'

const router = useRouter()

const goArticleDetail = (articleId) => {
    console.log('跳转详情页' + articleId)
    router.push({ path: '/article/detail', query: { articleId: articleId } })
}

// 轮播当前活动文章索引
const activeTopArticleIndex = ref(0)

// 切换置顶文章
const switchTopArticle = (index) => {
    activeTopArticleIndex.value = index
}

// 自动切换到下一篇置顶文章
const nextTopArticle = () => {
    if (topArticles.value && topArticles.value.length > 1) {
        const maxIndex = Math.min(2, topArticles.value.length - 1)
        activeTopArticleIndex.value = activeTopArticleIndex.value >= maxIndex ? 0 : activeTopArticleIndex.value + 1
    }
}

// 自动轮播定时器
let topArticlesTimer = null

// 在组件挂载时启动自动轮播
onMounted(() => {
    // 电子时钟初始化和定时器
    formatTime()
    timer = setInterval(formatTime, 1000)
    
    // 本站运行时间初始化和独立定时器
    calculateRuntime()
    runtimeTimer = setInterval(calculateRuntime, 1000)
})

// 启动置顶文章自动轮播的函数
const startTopArticlesCarousel = () => {
    // 先清除已有的定时器（如果存在）
    if (topArticlesTimer) {
        clearInterval(topArticlesTimer)
    }
    
    // 只有当有多个置顶文章时才启动轮播
    if (topArticles.value && topArticles.value.length > 1) {
        topArticlesTimer = setInterval(nextTopArticle, 5000) // 每5秒切换一次
    }
}

// 组件卸载时清除定时器
onUnmounted(() => {
    // 清除电子时钟定时器
    if (timer) {
        clearInterval(timer)
    }
    
    // 清除本站运行时间定时器
    if (runtimeTimer) {
        clearInterval(runtimeTimer)
    }
    
    // 清除置顶文章自动轮播定时器
    if (topArticlesTimer) {
        clearInterval(topArticlesTimer)
    }
})

const articles = ref([])
const tableData = ref([])
const topArticles = ref([])  // 置顶文章
const normalArticles = ref([])  // 普通文章
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(5)
const tableLoading = ref(false) // 添加缺失的 tableLoading 变量
const pages = ref(1) // 添加缺失的 pages 变量，并初始化为1确保至少显示一页

// 获取分页数据
function getTableData(pageNum) {
    console.log('获取分页数据', pageNum)
    tableLoading.value = true
    // 如果传入了页码参数，使用传入的页码；否则使用current.value
    const requestPage = pageNum || current.value
    
    getIndexArticles({ current: requestPage, size: size.value })
        .then((res) => {
            console.log('API返回数据:', res)
            if (res.success == true) {
                // 分离置顶文章和普通文章
                const articlesData = res.data && res.data.records ? res.data.records : (res.data || [])
                console.log('文章数据:', articlesData)
                articles.value = articlesData // 修复：将数据赋值给 articles 响应式引用
                topArticles.value = articlesData.filter(item => item.isTop)
                normalArticles.value = articlesData.filter(item => !item.isTop)
                
                // 更新当前页码，确保UI显示正确
                current.value = res.data && res.data.current ? res.data.current : (res.current || (pageNum || current.value))
                total.value = res.data && res.data.total ? res.data.total : (res.total || total.value)
                size.value = res.data && res.data.size ? res.data.size : (res.size || size.value)
                pages.value = res.data && res.data.pages ? res.data.pages : Math.ceil(total.value / size.value)
                
                // 数据加载完成后启动置顶文章轮播
                startTopArticlesCarousel()
            }
        }).finally(() => {
            tableLoading.value = false
        })
}

// 获取文章列表的函数（用于分页）
function getArticles(page) {
    // 直接将页码参数传递给getTableData，避免竞态条件
    getTableData(page)
}

getTableData()

// 获取分类
const categories = ref([])
getCategories().then((e) => {
    console.log('获取分类数据')
    console.log(e)
    categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
    console.log('获取标签数据')
    console.log(e)
    tags.value = e.data
})


const goCatagoryArticleListPage = (id, name) => {
    router.push({ path: '/category/list', query: { id: id, name: name } })
}

const goTagArticleListPage = (id, name) => {
    console.log('跳转 id' + id)
    router.push({ path: '/tag/list', query: { id: id, name: name } })
}

const handleCurrentChange = (e) => {
    console.log('选择的页码' + e)
    current.value = e
    getTableData()
}

const handleSizeChange = (e) => {
    console.log('选择的页码' + e)
    size.value = e
    current.value = 1  // 切换页面大小时回到第一页
    getTableData()
}

// 电子时钟功能
import { onMounted, onUnmounted } from 'vue'

const currentTime = ref('')
const currentDate = ref('')
let timer = null

// 格式化时间函数
const formatTime = () => {
    const now = new Date()
    
    // 格式化时间 (使用文字表示)
    const hours = String(now.getHours())
    const minutes = String(now.getMinutes())
    const seconds = String(now.getSeconds())
    currentTime.value = `${hours}时${minutes}分${seconds}秒`
    
    // 格式化日期 (YYYY-MM-DD 星期X)
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const weekdays = ['日', '一', '二', '三', '四', '五', '六']
    const weekday = weekdays[now.getDay()]
    currentDate.value = `${year}-${month}-${day} 星期${weekday}`
}

// 本站运行时间功能 (独立)
const siteRuntime = ref('') // 本站运行时间
let runtimeTimer = null

// 站点启动日期 - 从今天开始计算
const today = new Date()
const siteLaunchDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())

// 计算本站运行时间
const calculateRuntime = () => {
    const now = new Date()
    const diff = now - siteLaunchDate
    
    // 计算天、时、分、秒
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((diff % (1000 * 60)) / 1000)
    
    // 格式化输出为天 时 分形式
    siteRuntime.value = `${days}天 ${hours}时 ${minutes}分`
}


</script>

<style>
.container {
    max-width: 1230px;
}

.article-img {
    height: 100%;
}

.blur-bg {
    filter: blur(30px) brightness(0.70) contrast(0.9);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.1);
    opacity: 0.4;
    transition: all 0.5s ease;
    will-change: transform, filter;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    z-index: 0;
}

/* 确保文章卡片容器稳定布局 */
.article-card-stable {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 置顶区域样式 */
.top-articles-carousel {
    width: 100%;
    height: 100%;
}

.carousel-indicator {
    transition: all 0.3s ease;
}

.carousel-indicator.active {
    width: 2rem !important;
}

.carousel-button {
    transition: all 0.3s ease;
}

.carousel-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.two-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: var(--el-menu-text-color);
    background-color: #fff;
    border-bottom: 2px solid #409eff;
}

.category-item:hover {
    text-decoration: underline;
    cursor: pointer;
}

.tag-item:hover {
    cursor: pointer;
}

.el-tag:hover {
    background-color: var(--el-color-info-light-8);
}

.cursor-pointer {
    cursor: pointer;
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 调整容器内边距 */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 置顶轮播区域调整 */
    .relative.w-full.h-\[500px\] {
        height: 300px !important;
    }
    
    /* 置顶文章标题样式调整 */
    .text-4xl.md\:text-5xl {
        font-size: 1.8rem !important;
        padding: 8px;
    }
    
    /* 文章卡片调整 */
    .flex.flex-col.md\:flex-row.h-auto.md\:h-64 {
        flex-direction: column;
        height: auto;
    }
    
    .md\:w-1\/2 {
        width: 100%;
    }
    
    /* 文章摘要调整 */
    .text-gray-200.text-xl {
        font-size: 1rem;
        margin-top: 1rem;
        padding-left: 0 !important;
    }
    
    /* 文章元信息调整 */
    .flex.flex-wrap.items-center.gap-4.text-sm.text-gray-300.mt-18.pl-12 {
        margin-top: 1rem;
        padding-left: 0 !important;
        gap: 8px;
    }
    
    /* 右边栏元素调整 */
    .sticky.top-21 .w-\[120\%\] {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* 分页样式调整 */
    .flex.items-center.justify-center.mt-10.mb-10 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    /* 按钮调整 */
    .inline-flex.items-center.px-6.py-3 {
        padding: 8px 16px;
    }
}

/* 平板端适配 */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 调整网格布局 */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: 1fr 3fr;
    }
    
    /* 调整文章卡片高度 */
    .flex.flex-col.md\:flex-row.h-auto.md\:h-64 {
        height: 200px;
    }
}
</style>